<template>
    订单管理

    <el-form :inline="true" :model="condForm">
        <el-form-item label="订单号">
            <el-input v-model="condForm.id" />
        </el-form-item>
        <el-form-item label="订单状态" style="width: 22%">
            <el-select v-model="condForm.state" placeholder="请选择订单状态......">
                <el-option label="全部" value="" />
                <el-option label="未出库" value="未出库" />
                <el-option label="已出库" value="已出库" />
                <el-option label="配送中" value="配送中" />
                <el-option label="已收货" value="已收货" />
            </el-select>
        </el-form-item>
        <br/>
        <el-form-item label="客户姓名">
            <el-input v-model="condForm.custName" />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="condForm.itemName" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="getOrderList(1)">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="id" key="order" label="订单编号" width="180" />
        <el-table-column prop="custName" label="客户姓名" />
        <el-table-column prop="itemName" label="商品名称" />
        <el-table-column prop="payMoney" label="支付金额" />
        <el-table-column prop="orderDate" label="支付日期" />
        <el-table-column prop="pay" label="支付方式" />
        <el-table-column prop="state" label="支付状态" />
        
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="getCustList" v-model:current-page="currentPage"/>
</template>

<script setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';

const orderList = ref([])
const total = ref()
const condForm = reactive({
    id: '',
    state: '',
    custName: '',
    itemName: ''
})

const currentPage = ref(1)

function getOrderList(currentPage) {
    condForm.pageNum = currentPage
    axios.post("http://localhost:8081/listOrder", condForm).then((resp)=>{
        console.log(resp.data)
        orderList.value = resp.data.list
        total.value = resp.data.total
    }).catch((error)=>{

    })
}

onMounted(() => {
    getOrderList(1)
})
</script>

<style scoped></style>